import React, { useState, useEffect, useContext } from 'react';
import moment from 'moment';
import {
    Skeleton, Avatar,
    Card,
    Button, Row, Col, Table, Space
} from 'antd';
import { DeleteOutlined, EditOutlined, EllipsisOutlined, UnlockOutlined, ProfileOutlined } from '@ant-design/icons';

import styles from './style.module.scss';
import Home, { HomeContext } from 'container/account/context';

const format = 'YYYY-MM-DD HH:mm:ss'

function ListTableStyle(props) {
    const {
        list,
        labels,
        type,
        deleteHandle,
        editHandle,
        viewPassHandle,
        viewMoreHandle,

        selectedRowKeys, setSelectedRowKeys,
        selectedRows, setSelectedRows,
    } = useContext(HomeContext);

    const columns = [
        { title: '数据id', dataIndex: 'id', width: 60, align: 'center' },
        {
            title: '网站名称', dataIndex: 'site', width: 120, render(text, record, index) {
                return <a target="_blank" href={record.website} title={record.website}>{record.site}</a>
            }
        },
        {
            title: '网站简介', dataIndex: 'introduction', width: 150, render(text) {
                let style = {
                    width: '150px',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                }
                return <div style={style}>{text}</div>
            }
        },
        { title: '注册账户', dataIndex: 'account', width: 150, },
        {
            title: '加密密码', dataIndex: 'password', width: 120, render(text) {
                let style = {
                    width: '120px',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                }
                return <div style={style}>{text}</div>
            }
        },
        { title: '账户昵称', dataIndex: 'nickname', width: 120, },
        { title: '账户状态', dataIndex: 'statusText', width: 120 },
        {
            title: '备注', dataIndex: 'remark', width: 150, render(text, record, index) {
                let style = {
                    width: '150px',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                }
                return <div style={style}>{text}</div>
            }
        },
        {
            title: '标签', dataIndex: 'tags', width: 200, render(text) {
                return formatTags(text)
            }
        },
        { title: '关联账户', dataIndex: 'associates', width: 150, },
        {
            title: '创建时间', dataIndex: 'createTime', width: 150, render(text) {
                let style = {
                    width: '150px',
                    whiteSpace: 'nowrap'
                }
                return <div style={style}>{moment(text).format(format)}</div>
            }
        },
        {
            title: '更新时间', dataIndex: 'updateTime', width: 150, render(text) {
                let style = {
                    width: '150px',
                    whiteSpace: 'nowrap'
                }
                return <div style={style}>{moment(text).format(format)}</div>
            }
        },
        {
            title: '操作', width: 100, render(text, record) {
                let style = { padding: '4px 4px' }
                return (
                    <>
                        <UnlockOutlined key="unlock" title="查看密码" style={style} onClick={() => viewPassHandle(record)} />
                        <EditOutlined key="edit" title="编辑" style={style} onClick={() => editHandle(record)} />
                        <DeleteOutlined key="delete" title="删除" style={style} onClick={() => deleteHandle(record)} />
                        <ProfileOutlined key="ellipsis" title="查看详情" style={style} onClick={() => viewMoreHandle(record)} />
                    </>
                )
            }
        },
    ]
    function formatTags(tagsArr) {
        if (!tagsArr) {
            return;
        }
        let tags = tagsArr.map(item => {
            return labels.find(i => i.id === item);
        })
        return tags.map(item => {
            return (
                <span className={styles.label}>{item.label}</span>
            )
        })
    }
    const rowSelection = {
        onChange: (keys, rows) => {
            console.log(`selectedRowKeys: `, keys, 'selectedRows: ', rows);
            setSelectedRowKeys(keys);
            setSelectedRows(rows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    return (
        <Table
            columns={columns}
            dataSource={list}
            rowKey="id"
            pagination={false}
            className={styles.customTable}
            rowSelection={type === 'batchDelete' ? rowSelection : null}
        />
    )
}
ListTableStyle.defaultProps = {
    data: {},
    onDelete: () => { },
    onViewPass: () => { },
    onEdit: () => { },
    onViewMore: () => { },
}

export default ListTableStyle;
